<!-- 在App.vue总要写三个标签，template负责html，script负责js，style负责样式 -->
<template>
  <div class="person">
    <!-- <h1>{{ x.a }}</h1>
    <h2>{{ x.b }}</h2>
    <h4>{{ x.c }}</h4>
    <h5>{{ x.d }}</h5>
    <h3>{{ x.list }}</h3> -->
    <!-- <ul>
      <li v-for="x in list" :key="x.id"><!-- key一定要加，不然会有大问题，
        还要加:   ，这样才可以正确读取x
        {{ x.name }}--{{ x.age }}
      </li>
    </ul> 
    -->
  </div>
</template>


<script setup name="Person" lang="ts">//加上setup就是语法糖，自动返回，但是组件名要另外写，通过name属性来设置
import { withDefaults } from 'vue'
import { type Persons } from '@/types';
// defineProps(['a', 'b', 'list'])这是使用defineProps的接收语法，括号内必须是数组，数组元素要加''

  //let x = defineProps(['a', 'b', 'c', 'd', 'list'])//这是接收并保存的语法，x的类型是对象

  //接收list+限制类型
  //defineProps<{lsit:Persons}>()

  //接收list + 限制类型 + 限制必要性 + 指定默认值
  // withDefaults(defineProps<{list?:Persons}>(), {
  //   list:() => [{id: 'aofh', name: 'aoidsfhoa', age: 20}]
  // })
  //withDefaults的存在让list可以设置默认值，不过设置要通过函数的形式，即箭头函数部分，即两个参数部分
</script>

<style scoped>
  .person {
    width: 100%;
    height: 100%;
    background-color: pink;
  }
</style>
